<template>
  <el-menu class="menu" :default-active="activeIndex" :background-color="background" :collapse="collapse" :text-color="textColor" router @select="selected">
    <template v-for="(item, index) in dataList" :key="index">
      <c-menu-item :item="item"></c-menu-item>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import CMenuItem from '@/components/c-menu/c-menu-item.vue'

withDefaults(
  defineProps<{
    dataList: any[]
    activeIndex?: string
    collapse?: boolean
    background?: string
    textColor?: string
  }>(),
  {
    collapse: false,
    background: 'rgb(48, 65, 86)',
    textColor: 'rgb(191, 203, 217)'
  }
)

const $emit = defineEmits<{
  (e: 'select', index: string): void
}>()

const selected = (index: string) => {
  $emit('select', index)
}
</script>

<style lang="scss" scoped>
.el-menu {
  border-right: unset;
}

.menu:not(.el-menu--collapse) {
  width: 200px;
}

.collapse {
  margin-right: 16px;
}
</style>
